<template>
	<view class="projectComponent">
		<view class="projectComponentHeadFont">
			<img :src="stateImage" />
			<view class="fontHead">{{ propData.name }}</view>
			<view class="fontDate">{{ createDate }}</view>
		</view>
		<view class="createUsers">创建人:&nbsp;&nbsp; {{ usersName }}</view>
		<view class="projectCost">
			<view style="font-size: 25rpx; color: #b9b9b9; margin-right: 15rpx">毛利润:</view>
			{{ profit.toFixed(2) }}
			<view style="font-size: 30rpx; color: #000000; margin-left: 10rpx">￥</view>
		</view>
		<view class="font2">
			<view style="color: #b9b9b9; font-size: 25rpx">合同金额</view>
			<view>{{ propData.investmentAmount }}￥</view>
		</view>
		<view class="font3">
			<view style="color: #b9b9b9; font-size: 25rpx">材料成本</view>
			<view>{{ warehouseCost.toFixed(2) }}￥</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';

export default {
	computed: {
		profit() {
			return this.propData.investmentAmount - this.warehouseCost;
		},
		createDate() {
			return new Date(this.propData.createTime).toISOString().split('T')[0];
		},
		warehouseCost() {
			return this.propData.publicCost + this.propData.cashCost + this.propData.credit + this.propData.purchaseContractTax;
		}
	},
	data() {
		return {
			// 后面传入状态可更改颜色
			stateImage: require('@/static/项目符号.png'),
			usersName: null
		};
	},
	props: {
		propData: {
			type: Object
		}
	},
	methods: {
		updateState() {
			request('public/selectUserById', { id: this.propData.users }, 'GET').then((res) => {
				if (res.data.code != 200) {
					this.$message.error('   ' + res.data.msg);
					console.log(res.data.msg);
					return;
				}
				this.usersName = res.data.data.name;
			});

			if ('结束' == this.propData.state) {
				this.stateImage = require('@/static/项目符号3.png');
			} else if ('进行中' == this.propData.state) {
				this.stateImage = require('@/static/项目符号.png');
			} else if ('准备' == this.propData.state) {
				this.stateImage = require('@/static/项目符号sucess.png');
			}
		}
	},

	mounted() {
		this.updateState();
	},
	updated() {
		this.updateState();
	}
};
</script>

<style scoped>
.projectComponent {
	width: 700rpx;
	height: 350rpx;
	background-color: white;
	border-radius: 5%;
	position: relative;
	font-size: 30rpx;
}
/* 项目名称 */
.projectComponentHeadFont {
	position: absolute;
	width: 400rpx;
	height: 50rpx;
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}
.projectComponentHeadFont img {
	width: 50rpx;
}
.projectComponentHeadFont .fontHead {
	font-size: 33rpx;
}
.projectComponentHeadFont .fontDate {
	margin-left: 25rpx;
	color: #b6b6b6;
	font-size: 26rpx;
}
.projectName {
	position: absolute;
	width: 400rpx;
	height: 100rpx;
	font-size: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 110rpx 0 0 70rpx;
}
/* .projectName {
	position: absolute;
	width: 400rpx;
	height: 100rpx;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 150rpx 0 0 120rpx;
} */

/* 余额 */
.projectCost {
	position: absolute;
	width: 400rpx;
	height: 100rpx;
	font-size: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 110rpx 0 0 120rpx;
}
/* .projectCost {
	position: absolute;
	width: 400rpx;
	height: 100rpx;
	font-size: 30rpx;
	color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 150rpx 0 0 120rpx;
} */

/* 创建者 */
.createUsers {
	position: absolute;
	width: 300rpx;
	height: 100rpx;
	margin: 25rpx 0 0 430rpx;
	color: #b6b6b6;
}

/* 收入 */
.font2 {
	width: 200rpx;
	height: 100rpx;
	position: absolute;
	margin: 230rpx 0 0 60rpx;
}

/* 支出 */
.font3 {
	width: 200rpx;
	height: 100rpx;
	position: absolute;
	margin: 230rpx 0 0 450rpx;
}
</style>
